import React, {useEffect, useState} from 'react'
import {Button, Modal, List,Descriptions} from 'antd'
import { getSoreTopicScore } from '../../service'
import moment from 'moment';

const ScoreDetail = (props) => {

  const { visible,onCancel,current={}} = props;
  const [data, setData] = useState([]);
  const [sum,setSum] = useState(0);

  useEffect(() => {
    if(visible && current.id){
      getSoreTopicScore(current.id).then(res => {
        let temp = 0;
        res.map(item => {
          temp = temp + item.score;
        });
        setSum(temp);
        setData(res);
      });
    }
  }, [visible]);

  const renderFooter = () => {
    return (
      <>
        <div style={{textAlign:'center'}}>
          <p>当前评分总分为 <span style={{color:'#68B377',fontWeight:'bold'}}>{sum}</span> 分</p>
          <Button type="primary" onClick={() => onCancel()}>关闭</Button>
        </div>
      </>
    )
  };

  return (
    <Modal width='60%' title="评分详情" visible={visible} footer={renderFooter()} onCancel={() => onCancel()}>
      <Descriptions>
        <Descriptions.Item label="评分人">{current.name}</Descriptions.Item>
        <Descriptions.Item label="评分人工号">{current.createCode}</Descriptions.Item>
        <Descriptions.Item label="评分日期">{current.scoreTime && moment(current.scoreTime).format('YYYY-MM-DD')}</Descriptions.Item>
      </Descriptions>
      <List
        bordered
        style={{marginBottom: '24px'}}
        dataSource={data}
        renderItem={(item,index) => (
          <List.Item>
            <List.Item.Meta style={{marginTop: '4px'}} title={index + 1 + `、` + item.title}/>
            <div style={{marginRight:'25px'}}>{item.score}分</div>
          </List.Item>
        )}
      />
    </Modal>
  )
};

export default ScoreDetail
